<template>
  <div>
    <h1>自定义指令</h1>
    <!-- 
      autofocus可以实现自动聚焦
      但是有兼容问题，所以我们要通过js的方式调用focus处理
     -->
    <!-- <input type="text" autofocus /> -->
    <!-- 
      v-xxx 这种就是指令 封装dom的操作
      内置指令 v-on v-if v-bind....
      v-xxx就是自己写的自定义指令 xxx是指令名字
     -->
    <!-- <textarea name="" id="" cols="30" rows="10" v-focus></textarea>
    <input type="text" v-focus /> -->

    <!-- 
      想让设置标签内文字的颜色 操作dom 封装自定义指令
      v-color => 把标签里的字改成红色
      指令=“” 动态绑定 绑定的是什么类型  把双引号遮起来看
     -->
    <h2 v-color="red">要改红色了</h2>
    <p v-color="'blue'">哈哈我是帅峰</p>
    <div v-color="'pink'">哈哈</div>
    <button @click="red = 'teal'">改颜色</button>
  </div>
</template>

<script>
/**
 * 自定义指令需求
 *  一个input框 然后使用自定义指令
 *  一刷新看到页面就自动聚焦
 * 局部注册语法
 *  directives属性 配对象
 *    “指令名称”: {
 *      // dom插入的页面的时候 函数自动调用 - 钩子函数
 *      inserted(el) {
 *      }
 *    }
 */
export default {
  data() {
    return {
      red: "red",
    };
  },
  directives: {
    focus: {
      inserted(el) {
        // console.log(el);
        el.focus();
      },
    },
    color: {
      inserted(el, { value }) {
        // console.log(el, value);
        el.style.color = value;
      },
      update(el, binding) {
        // console.log("update", el, value);
        // console.log(binding, vnode, oldvnode);
        // console.log(binding);
        if (binding.value !== binding.oldValue) {
          console.log("需要更新");
          el.style.color = binding.value;
        }
      },
    },
    // color2: {
    //   inserted(el) {
    //     console.log(el);
    //     el.style.color = "blue";
    //   },
    // },
  },
};
</script>

<style>
</style>
